<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>智慧档案</el-breadcrumb-item>
        <el-breadcrumb-item>防雷监控</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新数据</el-button>
        <el-button type="success" icon="el-icon-setting">参数配置</el-button>
      </div>
    </div>

    <!-- 设备选择区域 -->
    <div class="device-selector">
      <el-card shadow="never">
        <div class="selector-content">
          <div class="selector-item">
            <span class="label">A库房</span>
            <el-select v-model="selectedDevice" placeholder="红外双鉴探测器" @change="onDeviceChange">
              <el-option label="红外双鉴探测器_1" value="device1"></el-option>
              <el-option label="红外双鉴探测器_2" value="device2"></el-option>
            </el-select>
          </div>
          <div class="device-info">
            <span class="device-status">设备状态: 正常</span>
            <span class="work-mode">工作模式: 手动</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧内容 -->
        <el-col :span="16">
          <!-- 雷达监控图 -->
          <el-card class="radar-card">
            <div slot="header" class="radar-header">
              <span>雷达监控</span>
              <div class="radar-controls">
                <el-button size="small" type="primary" @click="toggleScan">
                  {{ isScanning ? '停止扫描' : '开始扫描' }}
                </el-button>
              </div>
            </div>
            <div class="radar-container">
              <div class="radar-display">
                <svg width="400" height="400" viewBox="0 0 400 400" class="radar-svg">
                  <!-- 雷达背景圆圈 -->
                  <circle cx="200" cy="200" r="180" fill="none" stroke="#00ff00" stroke-width="1" opacity="0.3"/>
                  <circle cx="200" cy="200" r="120" fill="none" stroke="#00ff00" stroke-width="1" opacity="0.3"/>
                  <circle cx="200" cy="200" r="60" fill="none" stroke="#00ff00" stroke-width="1" opacity="0.3"/>
                  
                  <!-- 雷达十字线 -->
                  <line x1="20" y1="200" x2="380" y2="200" stroke="#00ff00" stroke-width="1" opacity="0.3"/>
                  <line x1="200" y1="20" x2="200" y2="380" stroke="#00ff00" stroke-width="1" opacity="0.3"/>
                  
                  <!-- 雷达扫描线 -->
                  <line 
                    x1="200" 
                    y1="200" 
                    :x2="scanLineX" 
                    :y2="scanLineY" 
                    stroke="#00ff00" 
                    stroke-width="2" 
                    opacity="0.8"
                    v-if="isScanning"
                  />
                  
                  <!-- 检测点 -->
                  <circle 
                    v-for="(point, index) in detectionPoints" 
                    :key="index"
                    :cx="point.x" 
                    :cy="point.y" 
                    :r="point.size" 
                    :fill="point.color" 
                    opacity="0.8"
                  />
                </svg>
              </div>
              <div class="radar-info">
                <div class="info-item">
                  <span class="info-label">扫描半径:</span>
                  <span class="info-value">500m</span>
                </div>
                <div class="info-item">
                  <span class="info-label">检测目标:</span>
                  <span class="info-value">{{ detectionPoints.length }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">最近检测:</span>
                  <span class="info-value">{{ lastDetectionTime }}</span>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 检测日志 -->
          <el-card class="detection-log" style="margin-top: 20px;">
            <div slot="header">
              <span>检测日志</span>
            </div>
            <el-table :data="detectionLogs" style="width: 100%" height="200">
              <el-table-column prop="time" label="时间" width="180"></el-table-column>
              <el-table-column prop="type" label="类型" width="120">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.type === '正常' ? 'success' : 'warning'">
                    {{ scope.row.type }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="描述"></el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <!-- 右侧内容 -->
        <el-col :span="8">
          <!-- 设备状态 -->
          <el-card class="device-status-card">
            <div slot="header">
              <span>设备状态</span>
            </div>
            <div class="device-status-content">
              <div class="status-item">
                <div class="status-icon normal">
                  <i class="el-icon-success"></i>
                </div>
                <div class="status-info">
                  <div class="status-title">红外双鉴探测器_1</div>
                  <div class="status-desc">设备状态: 正常</div>
                  <div class="status-desc">工作模式: 手动</div>
                </div>
              </div>
              
              <div class="status-metrics">
                <div class="metric-item">
                  <span class="metric-label">检测范围</span>
                  <span class="metric-value">500m</span>
                </div>
                <div class="metric-item">
                  <span class="metric-label">灵敏度</span>
                  <span class="metric-value">高</span>
                </div>
                <div class="metric-item">
                  <span class="metric-label">响应时间</span>
                  <span class="metric-value">< 1s</span>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 报警设置 -->
          <el-card class="alarm-settings" style="margin-top: 20px;">
            <div slot="header">
              <span>报警设置</span>
            </div>
            <div class="alarm-content">
              <div class="setting-item">
                <span class="setting-label">声音报警</span>
                <el-switch v-model="alarmSettings.sound"></el-switch>
              </div>
              <div class="setting-item">
                <span class="setting-label">邮件通知</span>
                <el-switch v-model="alarmSettings.email"></el-switch>
              </div>
              <div class="setting-item">
                <span class="setting-label">短信通知</span>
                <el-switch v-model="alarmSettings.sms"></el-switch>
              </div>
              <div class="setting-item">
                <span class="setting-label">灵敏度</span>
                <el-slider 
                  v-model="alarmSettings.sensitivity" 
                  :min="1" 
                  :max="10"
                  show-input
                  input-size="small"
                ></el-slider>
              </div>
            </div>
          </el-card>

          <!-- 统计信息 -->
          <el-card class="statistics" style="margin-top: 20px;">
            <div slot="header">
              <span>统计信息</span>
            </div>
            <div class="stats-content">
              <div class="stat-item">
                <div class="stat-number">{{ statistics.todayDetections }}</div>
                <div class="stat-label">今日检测</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ statistics.weekDetections }}</div>
                <div class="stat-label">本周检测</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ statistics.monthDetections }}</div>
                <div class="stat-label">本月检测</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LightningMonitor',
  data() {
    return {
      selectedDevice: 'device1',
      isScanning: false,
      scanAngle: 0,
      lastDetectionTime: '2025-05-21 14:43:23',
      detectionPoints: [
        { x: 250, y: 150, size: 4, color: '#ff4444' },
        { x: 180, y: 280, size: 3, color: '#ffaa00' },
        { x: 320, y: 220, size: 2, color: '#44ff44' }
      ],
      detectionLogs: [
        {
          time: '2025-05-21 14:43:23',
          type: '异常',
          description: '检测到异常活动'
        },
        {
          time: '2025-05-21 14:30:15',
          type: '正常',
          description: '区域扫描正常'
        },
        {
          time: '2025-05-21 14:15:42',
          type: '正常',
          description: '设备自检完成'
        }
      ],
      alarmSettings: {
        sound: true,
        email: false,
        sms: true,
        sensitivity: 7
      },
      statistics: {
        todayDetections: 12,
        weekDetections: 85,
        monthDetections: 342
      },
      scanTimer: null
    }
  },
  computed: {
    scanLineX() {
      return 200 + 180 * Math.cos((this.scanAngle * Math.PI) / 180)
    },
    scanLineY() {
      return 200 + 180 * Math.sin((this.scanAngle * Math.PI) / 180)
    }
  },
  beforeDestroy() {
    if (this.scanTimer) {
      clearInterval(this.scanTimer)
    }
  },
  methods: {
    onDeviceChange(value) {
      console.log('设备切换:', value)
      this.refreshData()
    },
    refreshData() {
      // 模拟数据刷新
      this.statistics.todayDetections = Math.floor(Math.random() * 20) + 5
      this.lastDetectionTime = new Date().toLocaleString()
      
      // 随机生成检测点
      this.detectionPoints = []
      const pointCount = Math.floor(Math.random() * 5) + 1
      for (let i = 0; i < pointCount; i++) {
        const angle = Math.random() * 2 * Math.PI
        const radius = Math.random() * 160 + 20
        this.detectionPoints.push({
          x: 200 + radius * Math.cos(angle),
          y: 200 + radius * Math.sin(angle),
          size: Math.random() * 3 + 2,
          color: ['#ff4444', '#ffaa00', '#44ff44'][Math.floor(Math.random() * 3)]
        })
      }
    },
    toggleScan() {
      this.isScanning = !this.isScanning
      
      if (this.isScanning) {
        this.scanTimer = setInterval(() => {
          this.scanAngle = (this.scanAngle + 2) % 360
        }, 50)
      } else {
        if (this.scanTimer) {
          clearInterval(this.scanTimer)
          this.scanTimer = null
        }
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.device-selector {
  margin-bottom: 20px;
}

.selector-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selector-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  font-weight: bold;
  color: #303133;
}

.device-info {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #606266;
}

.device-status {
  color: #67C23A;
}

.work-mode {
  color: #409EFF;
}

.radar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.radar-container {
  display: flex;
  gap: 20px;
  align-items: center;
}

.radar-display {
  flex: 1;
  display: flex;
  justify-content: center;
  background: #000;
  border-radius: 8px;
  padding: 20px;
}

.radar-svg {
  background: radial-gradient(circle, #001100 0%, #000000 100%);
  border-radius: 50%;
}

.radar-info {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #EBEEF5;
}

.info-label {
  color: #909399;
  font-size: 14px;
}

.info-value {
  color: #303133;
  font-weight: bold;
}

.device-status-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.status-item {
  display: flex;
  gap: 15px;
  align-items: center;
}

.status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.status-icon.normal {
  background: #67C23A;
}

.status-info {
  flex: 1;
}

.status-title {
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.status-desc {
  font-size: 14px;
  color: #606266;
  margin-bottom: 2px;
}

.status-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #F5F7FA;
}

.metric-label {
  color: #909399;
  font-size: 14px;
}

.metric-value {
  color: #303133;
  font-weight: bold;
}

.alarm-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-label {
  color: #303133;
  font-size: 14px;
}

.stats-content {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .selector-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .radar-container {
    flex-direction: column;
  }
  
  .radar-info {
    width: 100%;
  }
  
  .stats-content {
    flex-direction: column;
    gap: 15px;
  }
}
</style>